<template>
  <div>
    <textarea
      name=""
      id="Nodes_textarea"
      v-model="Nodes_Content"
      placeholder="输入笔记内容..."
      ref="Nodes_textarea"
    ></textarea>
    <el-button type="primary" size="default" @click="SaveFile"
      >保存到文件</el-button
    >

    <a href="javascript:;" class="file"
      >打开文件
      <input type="file" id="file_txt" @change="Fileipt()" />
    </a>
    <el-button type="info" plain @click="fontAdd" style="margin-left:10px"
      >A+</el-button
    >
    <el-button type="info" plain @click="fontSub">A-</el-button>
  </div>
</template>

<script>
export default {
  name: "Nodes",
  // updated() {
  //   Fileipt();
  // },
  data() {
    return {
      Nodes_Content: "",
      FontSize: 20
    };
  },
  mounted() {
    // Fileipt();
  },
  methods: {
    //文件下载方法
    download(name, data) {
      const urlObject = window.URL || window.webkitURL || window;
      const downloadData = new Blob([data], {
        type: "text/plain;charset=utf-8"
      });
      //判断IE浏览器下载 IE10+
      if (navigator.msSaveBlob) {
        navigator.msSaveBlob(downloadData, name);
      } else {
        //火狐谷歌浏览器下载
        var save_link = document.createElement("a");
        save_link.href = urlObject.createObjectURL(downloadData);
        save_link.download = name;
        save_link.click();
      }
    },
    SaveFile() {
      this.download("笔记.txt", this.Nodes_Content);
    },
    Fileipt() {
      let this1 = this;
      let file = document.querySelector("#file_txt").files[0];
      if (!!file) {
        //读取本地文件，以(utf-8)gbk编码方式输出
        let reader = new FileReader();
        reader.readAsText(file, "utf-8");
        reader.onload = function() {
          this1.Nodes_Content = this.result;
        };
      }
    },
    fontAdd() {
      this.FontSize += 5;
      this.$refs.Nodes_textarea.style.fontSize = this.FontSize + "px";
    },
    fontSub() {
      this.FontSize -= 5;
      this.$refs.Nodes_textarea.style.fontSize = this.FontSize + "px";
    }
  }
};
</script>

<style lang="scss" scoped>
.file {
  background: #409eff;
  border-radius: 4px;
  margin-left: 5px;
  padding: 11px 30px;
  overflow: hidden;
  color: white;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
  position: relative;
  #file_txt {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 116px;
    height: 40px;
  }
}
#Nodes_textarea {
  display: block;
  border-radius: 20px;
  font-size: 18px;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #409eff;
  width: 100%;
  height: 70vh;
}
</style>
